<template>
  <div>
    <el-dialog
      title="新增巡更路线"
      :visible.sync="dialogVisible"
      width="550px"
      class="popup height40"
      :before-close="handleClose">
      <div class="scrollbar-wrap">
        <el-scrollbar class="scrollbar-x" style="height:100%">
          <el-form :model="formInline" :rules="rules" ref="formInline" label-width="100px">
            <el-form-item label="路线名称:">
              <el-input v-model.number="formInline.username" clearable></el-input>
            </el-form-item>
            <el-form-item label="路线位置:">
              <ul class="f-rowW title-wrap approval">
                <li v-for="(item, index) in approvalList" :key="index">
                  <div>
                    <el-avatar shape="square" :size="50" :src="item.url"></el-avatar>
                    <h6>{{ item.name }}</h6>
                  </div>
                  <span class="arrow">
                    <svg-icon icon-class="arrow_right"></svg-icon>
                  </span>
                </li>
                <li>
                  <div class="plussign-wrap" @click="handleAddLocation">
                    <el-avatar shape="square" :size="50">
                      <span class="plussign">+</span>
                    </el-avatar>
                  </div>
                </li>
              </ul>
            </el-form-item>
            <el-form-item label="备注:">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formInline.username">
              </el-input>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="small"  @click="handleAdd">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 选择位置 -->
    <add-location ref="addLocation" @setLocation="setLocation"></add-location>
  </div>
  
</template>

<script>
import AddLocation from './AddLocation'
import { addPersonnel } from '@/api/personnel'
export default {
  components: {
    AddLocation
  },
  data() {
    return {
      dialogVisible: false,
      formInline: {
        username: '',
        password: '',
        phone: '',
        role: ['1']
      },
      approvalList: [
        {name: '1号位置', url: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'},
        {name: '2号位置', url: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'}
      ]
    };
  },
  computed: {
    rules() {
      return {
        // pass: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        // ],
        // checkPass: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        // ],
        // age: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        // ]
      }
    }
      
  },
  methods: {
    togglePopup(flag) {
      this.dialogVisible = flag
    },
    handleClose(done) {
     this.togglePopup(false)
    },
    // 选择位置
    handleAddLocation() {
      this.$refs.addLocation.togglePopup(true)
    },
    // 
    setLocation(data) {
      this.approvalList.push(data)
    },
    handleAdd() {
      addPersonnel(this.formInline)
        .then(res => {
          if (res.code === 0) {
            this.$message.success(res.msg || '成功')
            this.togglePopup(false)
            this.$emit('refresh')
          }
        })
        .catch(err => {
          this.togglePopup(false)
        })
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~styles/popup.scss';

.title-wrap {
  // margin-left: 120px;
  // margin-top: 20px;
  li {
    line-height: 30px;
  }
}
.approval {
  li {
    position: relative;
    padding-right: 50px;
    line-height: 20px;
    text-align: center;
    .arrow {
      position: absolute;
      right: 20px;
      top: 15px;
    }
    .plussign-wrap {
      cursor: pointer;
      .plussign {
        font-size: 46px;
      }
    }
    
  }
}
</style>